package pages

import (
	"github.com/templui/templui/internal/ui/layouts"
	"github.com/templui/templui/internal/ui/modules"
	"github.com/templui/templui/internal/ui/showcase"
)

templ TimePicker() {
	@layouts.DocsLayout(
		"Time Picker",
		"A native time selector with support for 12/24 hour formats.",
		[]modules.TableOfContentsItem{
			{
				ID:   "installation",
				Text: "Installation",
			},
			{
				ID:   "examples",
				Text: "Examples",
				Children: []modules.TableOfContentsItem{
					{
						ID:   "12h-format",
						Text: "12-hour Format",
					},
					{
						ID:   "with-label",
						Text: "With Label",
					},
					{
						ID:   "custom-placeholder",
						Text: "Custom Placeholder",
					},
					{
						ID:   "selected-time",
						Text: "With Selected Time",
					},
					{
						ID:   "step",
						Text: "With Step Intervals",
					},
					{
						ID:   "min-max",
						Text: "With Min/Max Range",
					},
					{
						ID:   "form",
						Text: "Form Integration",
					},
				},
			},
			{
				ID:   "api",
				Text: "API Reference",
				Children: []modules.TableOfContentsItem{
					{
						ID:   "timepicker",
						Text: "TimePicker",
					},
				},
			},
		},
	) {
		@modules.PageWrapper(modules.PageWrapperProps{
			Name:        "Time Picker",
			Description: templ.Raw("A native time selector with support for 12/24 hour formats."),
			Tailwind:    true,
			VanillaJS:   true,
			Breadcrumbs: modules.Breadcrumbs{
				Items: []modules.BreadcrumbItem{
					{
						Text: "Docs",
						Path: "/docs",
					},
					{
						Text: "Components",
						Path: "/docs/components",
					},
					{
						Text: "Time Picker",
					},
				},
			},
		}) {
			@modules.ExampleWrapper(modules.ExampleWrapperProps{
				ShowcaseFile:    showcase.TimePickerDefault(),
				PreviewCodeFile: "time_picker_default.templ",
			})
			@modules.ContainerWrapper(modules.ContainerWrapperProps{
				Title: "Installation",
				ID:    "installation",
			}) {
				@modules.ComponentUsage(modules.ComponentUsageProps{
					ComponentName: "timepicker",
					JSFiles:       []string{"timepicker", "popover"},
				})
			}
			@modules.ContainerWrapper(modules.ContainerWrapperProps{
				Title: "Examples",
				ID:    "examples",
			}) {
				@modules.ExampleWrapper(modules.ExampleWrapperProps{
					SectionName:     "12h Format",
					ShowcaseFile:    showcase.TimePicker12Hour(),
					PreviewCodeFile: "time_picker_12hour.templ",
					ID:              "12h-format",
				})
				@modules.ExampleWrapper(modules.ExampleWrapperProps{
					SectionName:     "With Label",
					ShowcaseFile:    showcase.TimePickerLabel(),
					PreviewCodeFile: "time_picker_label.templ",
					ID:              "with-label",
				})
				@modules.ExampleWrapper(modules.ExampleWrapperProps{
					SectionName:     "With Custom Placeholder",
					ShowcaseFile:    showcase.TimePickerCustomPlaceholder(),
					PreviewCodeFile: "time_picker_custom_placeholder.templ",
					ID:              "custom-placeholder",
				})
				@modules.ExampleWrapper(modules.ExampleWrapperProps{
					SectionName:     "With Selected Time",
					ShowcaseFile:    showcase.TimePickerSelectedTime(),
					PreviewCodeFile: "time_picker_selected_time.templ",
					ID:              "selected-time",
				})
				@modules.ExampleWrapper(modules.ExampleWrapperProps{
					SectionName:     "With Step Intervals",
					ShowcaseFile:    showcase.TimePickerStep(),
					PreviewCodeFile: "time_picker_step.templ",
					ID:              "step",
				})
				@modules.ExampleWrapper(modules.ExampleWrapperProps{
					SectionName:     "With Min/Max Range",
					ShowcaseFile:    showcase.TimePickerMinMax(),
					PreviewCodeFile: "time_picker_min_max.templ",
					ID:              "min-max",
				})
				@modules.ExampleWrapper(modules.ExampleWrapperProps{
					SectionName:     "With Form",
					ShowcaseFile:    showcase.TimePickerForm(),
					PreviewCodeFile: "time_picker_form.templ",
					ID:              "form",
				})
			}
			@modules.ContainerWrapper(modules.ContainerWrapperProps{
				Title: "API Reference",
				ID:    "api",
			}) {
				@modules.APILegend()
				<div id="timepicker">
					@modules.APITable(modules.APITableProps{
						Title:       "TimePicker",
						Description: "Time picker component for selecting time values with 12/24 hour format support.",
						Items: []modules.APITableItem{
							{
								Name:        "ID",
								Type:        "string",
								Default:     "",
								Description: "Unique identifier for the time picker element.",
								Required:    false,
							},
							{
								Name:        "Class",
								Type:        "string",
								Default:     "",
								Description: "Additional CSS classes to apply to the time picker.",
								Required:    false,
							},
							{
								Name:        "Attributes",
								Type:        "templ.Attributes",
								Default:     "",
								Description: "Additional HTML attributes to apply to the time picker element.",
								Required:    false,
							},
							{
								Name:        "Name",
								Type:        "string",
								Default:     "",
								Description: "Name attribute for the hidden input field.",
								Required:    false,
							},
							{
								Name:        "Value",
								Type:        "time.Time",
								Default:     "",
								Description: "Selected time value.",
								Required:    false,
							},
							{
								Name:        "MinTime",
								Type:        "time.Time",
								Default:     "",
								Description: "Minimum selectable time. Times before this will be disabled.",
								Required:    false,
							},
							{
								Name:        "MaxTime",
								Type:        "time.Time",
								Default:     "",
								Description: "Maximum selectable time. Times after this will be disabled.",
								Required:    false,
							},
							{
								Name:        "Step",
								Type:        "int",
								Default:     "1",
								Description: "Minute intervals for selection (e.g., 5, 10, 15, 30). Must be a divisor of 60.",
								Required:    false,
							},
							{
								Name:        "Use12Hours",
								Type:        "bool",
								Default:     "false",
								Description: "Whether to use 12-hour format (AM/PM) or 24-hour format.",
								Required:    false,
							},
							{
								Name:        "AMLabel",
								Type:        "string",
								Default:     "AM",
								Description: "Label for AM period in 12-hour format.",
								Required:    false,
							},
							{
								Name:        "PMLabel",
								Type:        "string",
								Default:     "PM",
								Description: "Label for PM period in 12-hour format.",
								Required:    false,
							},
							{
								Name:        "Placeholder",
								Type:        "string",
								Default:     "Select time",
								Description: "Placeholder text when no time is selected.",
								Required:    false,
							},
							{
								Name:        "Disabled",
								Type:        "bool",
								Default:     "false",
								Description: "Whether the time picker is disabled and non-interactive.",
								Required:    false,
							},
							{
								Name:        "HasError",
								Type:        "bool",
								Default:     "false",
								Description: "Whether the time picker has an error state (applies error styling).",
								Required:    false,
							},
						},
					})
				</div>
			}
		}
	}
}
